<!--
 * @Description: 
 * @Author: @yangwenshan
 * @since: 2021-05-13 09:53:09
 * @LastAuthor: @yangwenshan
 * @lastTime: 2021-05-13 11:19:41
-->
<template>
  <a-drawer title="" width="30%" placement="right" :visible="visible" @close="onClose">
    <a-spin tip="数据加载中" :spinning="loading">
      <a-descriptions title="题目详情" :column="1">
        <a-descriptions-item label="题目名称">{{ data.name }} </a-descriptions-item>
        <a-descriptions-item label="题目分类"> {{ data.type ? data.type.name : '-' }}</a-descriptions-item>
        <a-descriptions-item label="类型">{{ data.cate }}</a-descriptions-item>
        <a-descriptions-item label="选项">
          <a-input disabled style="margin-top: 12px" v-for="(item, index) in data.options" :addon-before="item.key"
            :key="index" v-model="item.value" />
        </a-descriptions-item>
        <a-descriptions-item label="正确选项"> {{ data.answer.toString() }} </a-descriptions-item>
        <a-descriptions-item label="试题详解">{{ data.remark }}</a-descriptions-item>
      </a-descriptions>
    </a-spin>
  </a-drawer>
</template>
<script>
import { getQuestionDetail } from '@/api/question'
export default {
  data() {
    return {
      visible: false,
      loading: false,
      data: {
        options: [],
        answer: []
      },
    }
  },
  methods: {
    showDrawer(record) {
      this.visible = true
      this.getDetail(record.id)
    },
    getDetail(id) {
      this.loading = true
      getQuestionDetail(id).then((res) => {
        this.data = res
      }).finally(() => {
        this.loading = false
      })
    },
    onClose() {
      this.visible = false
      this.data = {
        options: [],
        answer: []
      }
    },
  },
}
</script>
<style lang="less" scoped>
.pic-content {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
</style>
